<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>角色管理</title>
	<link href="../../../component/pear/css/pear.css" rel="stylesheet" />
	<script src="../../../component/layui/layui.js"></script>
	<script src="../../../component/pear/pear.js"></script>
</head>

<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<table id="table" lay-filter="table"></table>
		</div>
	</div>
</body>

</html>

<script type="text/html" id="toolbar">
	<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		<i class="layui-icon layui-icon-add-1"></i>
		新增
	</button>
</script>

<script type="text/html" id="bar">
	<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
	<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="give"><i class="layui-icon layui-icon-vercode"></i></button>
	<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script type="text/html" id="templet-isActive">
	{{#if(d.isActive){}}
	<input type="checkbox" name="isActive" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="templet-isActive" checked  }}>
	{{# }else { }}
	<input type="checkbox" name="isActive" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="templet-isActive" }}>
	{{# } }}
</script>

<script>
	layui.use(["table", "form", "jquery", "permission", "context", "popup", "common", "tableext"], function () {
		var table = layui.table;
		var form = layui.form;
		var $ = layui.jquery;
		var common = layui.common;
		var permission = layui.permission;
		var context = layui.context;
		var popup = layui.popup;

		var basePath = context.get("base-path");

		table.render({
			elem: "#table",
			url: basePath + "/api/system/role/getlist",
			toolbar: "#toolbar",
			page: false,
			cols: [[
				{ title: "编号", field: "id", align: "center", width: 100, hide: true },
				{ title: "名称", field: "name", align: "center" },
				{ title: "排序", field: "sort", align: "center" },
				{ title: "状态", field: "isActive", align: "center", templet: "#templet-isActive" },
				{ title: "操作", toolbar: "#bar", align: "center", width: 195 }
			]],
			parseData: function (res) {
				return {
					"count": res.data.length,
					"statusCode": res.statusCode,
					"data": res.data
				};
			},
		});

		table.on("tool(table)", function (obj) {
			if (obj.event === "edit") {
				window.edit(obj);
			} else if (obj.event === "give") {
				window.give(obj);
			} else if (obj.event === "del") {
				window.del(obj);
			}
		});

		table.on("toolbar(table)", function (obj) {
			if (obj.event === "add") {
				window.add();
			} else if (obj.event === "refresh") {
				window.refresh();
			}
		});

		form.on("switch(templet-isActive)", function (obj) {
			$.ajax({
				url: basePath + "/api/system/role/setactive",
				data: JSON.stringify({ "id": obj.value }),
				success: function (result) {
					if (result.succeeded) {
						popup.success("设置成功");
					} else {
						popup.failure(JSON.stringify(result.errors));
					}
				}
			})
		});

		window.add = function () {
			layer.open({
				type: 2,
				title: "新增角色",
				shade: 0.1,
				area: ["500px", "400px"],
				content: "add.html?fresh=" + Math.random()
			});
		}

		window.give = function (obj) {
			layer.open({
				type: 2,
				title: "分配权限",
				title: false,
				shade: 0.1,
				area: ["800px", "600px"],
				content: "give.html?id=" + obj.data["id"] + "&fresh=" + Math.random()
			});
		}

		window.edit = function (obj) {
			layer.open({
				type: 2,
				title: "修改角色",
				shade: 0.1,
				area: ["500px", "400px"],
				content: "edit.html?id=" + obj.data["id"] + "&fresh=" + Math.random()
			});
		}

		window.del = function (obj) {
			let lock = false;
			layer.confirm("确定要删除该角色", {
				icon: 3,
				title: "提示"
			}, function (index) {
				if (!lock) {
					lock = true;
					layer.close(index);
					let roleId = obj.data["id"];
					let loading = layer.load();
					$.ajax({
						url: basePath + "/api/system/role/del",
						data: JSON.stringify({ Id: roleId }),
						success: function (result) {
							layer.close(loading);
							if (result.succeeded) {
								popup.success("删除成功", function () {
									obj.del();
								});
							} else {
								popup.failure(JSON.stringify(result.errors));
							}
						}
					})
				}
			});
		}

		window.refresh = function () {
			table.reload("table");
		}
	})
</script>